<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>账户维护</title>
    <link rel="stylesheet" type="text/css" href="css/videoMgr.css"/>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/bootstrap.min.js"></script>



</head>
<body>
<!--contentPanel内容面板：1.search  2.space  3.content -->
<div id="contentPanel">
    <!--
        作者：1029243332@qq.com
        描述：条件查询
    -->
    <!-- 1.search -->
    <div class="search">
        <!-- 1.1. head -->
        <div class="head">
            <span><img src="img/search.ico"/> 查询条件</span>
            <span class="showHide">
				<img src="img/up.ico" class="up"/>
				<img src="img/down.ico" class="down" style="display: none;"/>
			</span>
        </div>
        <!-- 1.2. body -->
        <div class="body">
            <form name="form1">
                <table width="100%" cellspacing="0">
                    <tr>
                        <td>视频编号</td>
                        <td><input v-model="video.vid" placeholder="支持模糊查询"/></td>
                        <td>标题</td>
                        <td><input v-model="video.vtitle" placeholder="支持模糊查询"/></td>
                        <td>分栏</td>
                        <td>
                            <select v-model="video.vlabel">
                                <option value="">请选择</option>
                                <option value="动漫">动漫</option>
                                <option value="番剧">番剧</option>
                                <option value="鬼畜">鬼畜</option>
                                <option value="音乐">音乐</option>
                                <option value="其它">其它</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6" id="btnPanel">
                            <input type="button" value="查询" @click="doListBy()"/>
                            <input type="button" value="清空" @click="doClear()"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

    <!-- 2.space -->
    <div class="space"></div>

    <!--
        描述：查询结果
    -->
    <!-- 3.content -->
    <div class="content">
        <!-- 3.1. head -->
        <div class="head">
            <span><img src="img/table.ico"/> 查询结果&nbsp;&nbsp;&nbsp;视频总数:{{videos.length}}</span>
            <span onclick="location.reload()" class="refresh"><img src="img/refresh.ico"/></span>
        </div>
        <!-- 3.2. body -->
        <div class="body">
            <table width="100%" cellspacing="0">
                <tr>
                    <th width="5%">序号</th>
                    <th width="10%">视频编号</th>
                    <th width="10%">标题</th>
<!--                    <th width="10%">封面</th>-->
                    <th width="10%">分栏</th>
                    <th width="15%">播放量</th>
                    <th width="15%">操作</th>
                </tr>
                <tr v-for="(v,i) in videos">
                    <td>{{i+1}}</td>
                    <td>{{v.vid}}</td>
                    <td>{{v.vtitle}}</td>
<!--                    <td>{{v.vcover}}</td>-->
                    <td>{{v.vlabel}}</td>
                    <td>{{v.vcount}}</td>
                    <td>
                        <a class="a0" @click='doDetail(v.vid)'>详情</a>
                        <a class="a1" @click='doUpdate(v.vid)'>修改</a>
                        <a class="a2" @click='doDelete(v.vid)'>删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>








</div>
</body>
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/showHide.js" type="text/javascript"></script>

<script>
    Vue.createApp({
        data() {
            return {
                video: {
                    // vid: '',
                    // vtitle: '',
                    // vcount: '',
                    // vurl: '',
                    // vcomment:'',
                    // vuptime: '',
                    // vlabel: '',
                    // vlike: '',
                    // vcollect: '',
                    // vdeleted: '',
                    // vcover:'',
                },
                videos: {}
            }
        },
        methods: {
            /* 查询所有视频 */
            doList() {
                axios({
                    method: "get",
                    url: '/video/listAllVideo',
                    params: this.video
                }).then(res => {
                    this.videos = res.data;
                });
            },
            doListBy(){
                axios({
                    method: "get",
                    url: '/video/listVideosBy',
                    params: this.video
                }).then(res => {
                    this.videos = res.data;
                });
            },
            doUpdate(id) {
                // 将主键id存放在 sessionStorage 中，在 videoUpdate.html 页面中再取出
                sessionStorage.setItem("vid", JSON.stringify(id));
                location = "videoUpdate.html";
            },
            doDelete(id) {
                axios({
                    method: "post",
                    url: '/video/deleteVideo',
                    params: {vid: id}
                }).then(res => {
                    if (res.data == false) {
                        layer.msg("删除失败!");
                    } else {
                        this.doList();
                    }
                });
            },
            doClear() {
                this.video = {
                    vid: '',
                    vtitle: '',
                    vcount: '',
                    vurl: '',
                    vcomment:'',
                    vuptime: '',
                    vlabel: '',
                    vlike: '',
                    vcollect: '',
                    vdeleted: '',
                    vcover:'',
                }
            },
            doDetail(vid){

                axios({
                    method: "post",
                    url: '/video/selectVideo?vid='+vid,

                }).then(res => {
                    this.video = res.data.data;
                    //alert(JSON.stringify(this.video));
                    alert("视频编号="+this.video.vid+"\n"
                        +"标题="+this.video.vtitle+"\n"
                        +"分栏="+this.video.vlabel+"\n"
                        +"视频链接="+this.video.vurl+"\n"
                        +"封面链接="+this.video.vcover+"\n"
                        +"简介="+this.video.vcomment+"\n"
                        +"上传时间="+this.video.vuptime+"\n"
                        +"播放量="+this.video.vcount+"\n"
                        +"点赞量="+this.video.vlike+"\n"
                        +"收藏量="+this.video.vcollect+"\n"
                    )
                });
            }
        },
        created() {
            //页面加载完毕，查询展示所有用户
            this.doList();
        }
    }).mount("#contentPanel");
</script>
</html>
